<script setup>
import { onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const cartStore = useCartStore()
const route = useRoute()
const router = useRouter()

const info = ref(JSON.parse(route.query.item))
const ruleFormRef = ref()
const refundInfo = ref({})

// 收货地址表单校验
const rules = ref({
	consignee: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
	mobile: [
		{
			required: true,
			message: '请输入正确的手机号码',
			trigger: 'blur'
		}
	],
	addrCascader: [{ required: true, message: '请输入收货地址', trigger: 'change' }],
	addr: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
})

onMounted(() => getInfo())

const getInfo = () => {
	// console.log(info.value)
}

// 收货地址弹窗点击确定
const confirm = () => {
	// 调用实例方法
	ruleFormRef.value.validate(async (valid) => {
		// valid: 所有表单都通过校验  才为true
		// 以valid做为判断条件 如果通过校验才执行逻辑
		if (valid) {
			// TODO confirm
			const params = {
				...refundInfo.value
			}
			if (refundInfo.value.addrId == undefined) {
				// 新增
				await AddAddrAPI(params)
				ElMessage({ type: 'success', message: '新增成功' })
			} else {
				// 编辑
				await updateAddrAPI(params)
				ElMessage({ type: 'success', message: '新增成功' })
			}
			getAddr()
			showDialog.value = false
		}
	})
}
</script>

<template>
	<div class="ready-page">
		<div class="box">
			<div class="product">
				<div class="title">选择售后商品</div>
				<div class="content">
					<table>
						<!-- 商品列表 -->
						<tbody>
							<tr v-for="item in info.orderItems" :key="item.spuId">
								<td width="40%" class="goods">
									<img :src="item.pic" alt="" />
									<p class="name">{{ item.spuName }} - {{ item.skuName }}</p>
								</td>
								<td class="tc" width="20%">
									<p>×{{ item.count }}</p>
								</td>
								<td class="tc" width="35%">
									<p>&yen;{{ (item.spuTotalAmount / 100).toFixed(2) }}</p>
								</td>
								<td width="5%">
									<el-checkbox :model-value="item.isChecked" :true-value="1" :false-value="0" @change="(isChecked) => singleCheck(item, isChecked)" />
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="type">
				<div class="title">选择售后类型</div>
				<div class="content"></div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.ready-page {
	background-color: #f4f4f4;
	padding: 0 160px;
	min-height: calc(100vh - 151px);
	.box {
		background-color: #fff;
		padding: 30px 50px 50px;
		.product {
			margin-bottom: 40px;
			.content {
				font-size: 14px;
				color: #333333;
				line-height: 21px;
				table {
					width: 100%;
					td {
						margin-bottom: 30px;
						&:nth-child(2) {
							text-align: right;
							padding-right: 22px;
						}
						&:nth-child(3) {
							padding-right: 57px;
						}
						&:nth-child(4) {
							text-align: right;
						}
					}

					.goods {
						width: 100%;
						display: flex;
						align-items: center;
						img {
							width: 50px;
							height: 50px;
							margin-right: 20px;
						}

						.name {
							width: 200px;
							font-size: 14px;
							color: #333333;
							line-height: 21px;
						}
					}
				}
			}
		}
		.type {
		}
		.title {
			font-size: 24px;
			color: #333333;
			line-height: 36px;
			margin-bottom: 30px;
		}
	}
}

:deep(.el-checkbox) {
	/* 背景透明 */
	.el-checkbox__inner {
		background: transparent;
	}
	/* 选中样式 */
	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background: $xtxColor;
		border: 1px solid $xtxColor;
	}
	/* 大小 */
	.el-checkbox__inner {
		width: 24px;
		height: 24px;
	}
	/* 对勾样式 */
	.el-checkbox__inner::after {
		border: 1px solid #fff;
		border-left: 0;
		border-top: 0;
		left: 9px;
		top: 5px;
	}
	.el-checkbox__input.is-checked .el-checkbox__inner::after {
		transform: rotate(50deg) scaleY(2) scaleX(2);
	}
}
</style>